body.caerp .nav-tabs {
	display: flex;
	list-style-type: none;
	margin: var(--padding-xl) 0 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	li {
		padding: 0;

		a {
			color: var(--text-color);
			display: flex;
			line-height: 1.25;
			padding: var(--padding-s) var(--padding-m);
			position: relative;
			text-decoration: none;

			&::after,
			&::before {
				bottom: 2px;
				content: "";
				display: block;
				position: absolute;
				right: 0;
			}

			&:hover,
			&:focus,
			&:active {
				border-color: var(--theme-color);
			}
		}

		span.icon {
			margin-right: var(--padding-s);
		}

		svg {
			flex: 0 0 auto;
		}

		.bubble {
			margin-left: .5em;
		}
	}

	li.active:not(.dropdown) {
		>a {
			background: var(--screen-background-color);
			box-shadow: 0 2px 4px var(--box-shadow-color);
			cursor: default;
			font-weight: bold;
		}
	}

	&:not(.vertical-tabs) {
		margin-left: var(--negative-padding-s);
		padding-left: var(--padding-s);

		li {
			a {
				align-items: flex-end;
				border-bottom: 3px solid transparent;
				border-top: 5px solid transparent;
				display: flex;
				flex-wrap: wrap;
				height: 100%;
				padding-right: var(--padding-xl);

				&::after {
					border-right: 1px solid var(--border-color);
					top: 2px;
				}

				&:hover,
				&:focus,
				&:active {
					border-bottom-color: var(--theme-color);
				}

				.icon {
					flex: 0 0 auto;
				}
			}
		}

		li.active:not(.dropdown) {
			margin-bottom: -1px;

			>a {
				border-bottom-color: transparent;
				border-top-color: var(--theme-color);
				padding-top: 4px;
				padding-bottom: 6px;

				&::after {
					bottom: -1px;
					border-right: 1px solid var(--border-color);
					top: 0;
				}

				&::before {
					bottom: -3px;
					left: 0;
					border-left: 1px solid var(--border-color);
					right: auto;
					top: 0;
				}
			}
		}
	}

	&.vertical-tabs {
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: hidden;

		li {
			a {
				border-left: 5px solid transparent;
				border-right: 3px solid transparent;
				padding: var(--padding-m) var(--padding-s);

				&::after {
					border-bottom: 1px solid var(--border-color);
					bottom: 0;
					left: 0;
				}

				&:hover,
				&:focus,
				&:active {
					border-right-color: var(--theme-color);
				}
			}

			.bubble {
				margin: -.5em 0 -.5em .5em;
			}
		}

		li.active:not(.dropdown) {
			margin-right: -1px;

			>a {
				border-right-color: transparent;
				border-left: 5px solid var(--theme-color);

				&::before {
					border-top: 1px solid var(--border-color);
					bottom: auto;
					left: 0;
					top: 0;
				}
			}
		}

		li.active:nth-child(n + 2) {
			>a::before {
				display: none;
			}
		}
	}
}

body.caerp .sidebar-menu {
	ul {
		list-style-type: none;
		max-width: 100%;

		li.dropdown {
			border-bottom: 1px solid var(--border-color);
			border-top: 1px solid var(--border-color);

			svg.arrow {
				margin-left: var(--padding-s);
			}

			a.dropdown-toggle[aria-expanded="false"] {
				+ul {
					display: none;
				}
			}

			a.dropdown-toggle[aria-expanded="true"] {
				svg.arrow {
					transform: rotate(180deg);
				}
			}

			ul a {
				padding-left: var(--padding-l);
			}
		}

		li.disabled {
			a {
				color: var(--text-greyed-color);
				cursor: default;

				svg {
					fill: var(--text-greyed-color);
				}

				&:hover,
				&:focus,
				&:active {
					border-color: transparent;

					svg {
						fill: var(--text-greyed-color);
					}
				}
			}
		}
	}
}

body.caerp .layout.two_cols>.vertical-tabs-container,
body.caerp .layout.two_cols>.sidebar-container {
	margin-right: -1px;
	padding-right: 0;
}

body.caerp .layout.two_cols>.sidebar-container+.tab-content {
	flex: 1 0 70%;
}

body.caerp .tab-content {
	margin-top: -1px;
	padding: var(--padding-m);

	&:not(.vertical-tabs) {
		border: 1px solid var(--border-color);
		box-shadow: 0 2px 4px var(--box-shadow-color);
	}

	.tab-pane {
		display: none;

		&.active {
			display: block;
		}
	}

	table thead tr:first-child th[scope="col"] {
		height: auto;
	}
}

body.caerp .modal_view {
	.tab-content {
		border: 0 none;
		box-shadow: none;
		margin-left: -(var(--padding-m));
		margin-right: -(var(--padding-m));
		padding: var(--padding-m);
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp .nav-tabs {

		li,
		li.active {
			a {
				padding-right: var(--padding-3xl);
			}
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .nav-tabs {

		li,
		li.active {
			a {
				padding-right: var(--padding-xl);
			}
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp .nav-tabs {
		&:not(.vertical-tabs) {
			li a {
				padding-right: var(--padding-m);
			}
		}

		&.vertical-tabs {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-bottom: var(--padding-s);

			ul.nav-left {
				align-items: flex-end;
				display: flex;
				flex-wrap: wrap;
			}

			li {
				min-width: 10em;
				padding-right: var(--padding-s);
				width: 50%;

				li {
					width: 100%;
				}

				&.dropdown {
					border-top: 0 none;
				}
			}

			li a {
				border-bottom: 2px solid transparent;
				border-left-width: 0;
				border-right-width: 0;
				border-top: 5px solid transparent;

				&::after {
					border-bottom: 1px solid var(--border-color);
					border-right: 0 none;
					bottom: 0;
					left: 0;
					top: auto;
				}
			}

			li:not(.active) a {

				&:hover,
				&:focus,
				&:active {
					border-bottom-color: var(--theme-color);
					border-right-color: transparent;
				}
			}

			li.active:not(.droopdown) {
				margin: 0;

				>a:not([aria-expanded="true"]) {
					border-left-width: 0;
					border-right-width: 0;
					border-top-color: var(--theme-color);

					&::after {
						display: none;
					}
				}
			}
		}

		&.sidebar-menu>ul {
			border: 0 none;

			li.dropdown {
				border: 0 none;
			}
		}
	}
}

@media (min-width: $mobileWidth) and (max-width: $tabletWidth ) {
	body.caerp .nav-tabs {
		&.icon-tabs:not(.vertical-tabs) {
			li a {
				padding-left: var(--padding-m);

				.icon {
					margin: 0 0 0 var(--padding-s);
				}

				.icon+span {
					overflow: hidden;
					margin-left: var(--padding-s);
					transition: width .5s ease-out;
					white-space: nowrap;
					width: 0;
				}

				&:hover,
				&:focus,
				&:active {
					.icon+span {
						width: auto;
					}
				}
			}

			li.active>a {
				.icon+span {
					width: auto;
				}
			}
		}
	}
}

@media (min-width: $mobileWidth ) {
	body.caerp .sidebar-menu {
		>ul {
			border-right: 1px solid var(--border-color);
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .nav-tabs:not(.modal-tabs) {
		margin-top: var(--padding-m);
	}

	body.caerp .nav-tabs.icon-tabs:not(.modal-tabs):not(.vertical-tabs) {
		li:not(.active) {
			a {
				.icon {
					margin-left: var(--padding-s);
				}
			}

			.icon+span {
				display: none;
			}
		}
	}

	body.caerp .nav-tabs.vertical-tabs:not(.modal-tabs) {
		li {
			width: 100%;
		}
	}

	body.caerp .tab-content {
		padding: var(--padding-s);
	}
}